<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>版本推广管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="$route.query.preRouter"
          >渠道管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>批量下载项目App</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <el-row>
        <el-col :span="16">
          <el-form ref="form" :model="channel" label-width="220px">
            <el-form-item label="项目名称：">
              {{ channel.app_name }}
            </el-form-item>
            <el-form-item label="状态：">
              <div v-if="channel.pack_status == -1">未打包</div>
              <div
                v-if="
                  channel.pack_status == 0 ||
                  channel.pack_status == 1 ||
                  channel.pack_status == 2
                "
              >
                打包中{{
                  channel.pack_status == 0
                    ? "(项目正在打包中 1/3)"
                    : channel.pack_status == 1
                    ? "(打包结束正在部署 2/3)"
                    : "(部署完成... 3/3)"
                }}
                <el-progress
                  :text-inside="true"
                  :stroke-width="15"
                  :percentage="percentage"
                ></el-progress>
              </div>
              <div v-if="channel.pack_status == 3">
                打包成功
                <el-progress
                  :text-inside="true"
                  :stroke-width="15"
                  :percentage="100"
                  status="success"
                ></el-progress>
              </div>
              <div v-if="channel.pack_status == 4">
                打包失败(1/1)
                <el-progress
                  :text-inside="true"
                  :stroke-width="15"
                  :percentage="100"
                  status="exception"
                ></el-progress>
              </div>
            </el-form-item>
            <el-form-item label="项目打包次数：">
              第{{ channel.pack_num }}次
            </el-form-item>
            <el-form-item label="项目打包时间：">
              {{ channel.pack_time }}
            </el-form-item>
            <el-form-item label="项目App项目号：">
              {{ channel.app_channel_ids }}
            </el-form-item>
            <el-form-item label="">
              <el-button
                type="primary"
                v-if="channel.pack_status == 3"
                @click="dialogVisible = true"
                >发布</el-button
              >
              <el-button
                type="primary"
                v-if="channel.pack_status == 3"
                @click="identifyHistory"
                >发布历史</el-button
              >
              &nbsp;
              <router-link :to="$route.query.preRouter">
                <el-button>返回</el-button>
              </router-link>
              <br />
              <br />
              <br />
              <br />
            </el-form-item>
          </el-form> </el-col
        ><el-col :span="8"></el-col>
      </el-row>

      <el-dialog
        title="发布提示"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
      >
        <span
          >发布应用到CDN分发系统之前，请先确认应用安装包已经下载安装并验收通过?</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkPublish">确 定</el-button>
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import { catUrl } from "@/config/env";
import { common } from "@/api/cat/httpRequest";
import {
  appProjectPackManage as baseUrl,
  appProjectpPackCount,
} from "@/api/cat/baseUrls";

export default {
  data() {
    return {
      channel: {
        app_name: "橘子猫轻小说",
        pack_status: 0,
      },
      //是否继续访问端口的状态
      status: 0,
      pack_use_time: 0,
      percentage: 0,
      isInitPercentage: false,
      dialogVisible: false,
    };
  },
  methods: {
    async initChannel() {
      //获取打包状态
      let data = await common(
        baseUrl.batchChannelDownload,
        { channel_id: this.$route.query.channel_id },
        null,
        "POST"
      );
      if (data.code != 1) {
        return;
      }
      this.channel = data.data;

      //如果正在打包中,每3秒轮询一次
      if (
        this.channel.pack_status == 0 ||
        this.channel.pack_status == 1 ||
        this.channel.pack_status == 2
      ) {
        if (!this.isInitPercentage) {
          this.loadingPercentage();
        }
        let settimOut;
        if (settimOut) {
          clearInterval(settimOut);
        }
        settimOut = setTimeout(() => {
          this.initChannel();
        }, 3000);
      }
    },
    //打包中滚动条的百分比
    loadingPercentage() {
      //初始化进度条
      this.isInitPercentage = true;
      //上一次打包用时
      let second = this.channel.pack_avg_second;
      //定时任务
      let setinter = setInterval(() => {
        //距离打包已经过去多少秒
        let use_second =
          new Date().getTime() / 1000 -
          new Date(this.channel.pack_time).getTime() / 1000;
        //计算出平均时长
        let avg = (use_second / second).toFixed(2);
        if (avg < 1) {
          this.percentage = avg * 100;
        } else {
          this.percentage = 99.99;
          clearInterval(setinter);
        }
        if (this.channel.pack_status == 3) {
          this.percentage = 100;
          clearInterval(setinter);
        }
      }, 500);
    },
    //发布历史
    identifyHistory() {
    //   let channelId = this.channel.channel_id;
    //   if (!channelId) {
    //     this.$message.error("渠道id不存在,请刷新页面后再次尝试");
    //     return;
    //   }
      this.$router.push({
        path: "/projectpack/projectAppbatchhistory",
        query: {
          preRouter: this.$route.path,
        },
      });
    },
    //发布
    async checkPublish() {
      let userInfo = this.$store.state.user.userInfo;
      let data = await common(
        appProjectpPackCount.batchPublishChannelVersion,
        {
          create_account: userInfo.username,
        },
        null,
        "POST"
      );
      //发布成功
      if (data.code == 1) {
        this.identifyHistory();
        const h = this.$createElement;

        this.$notify({
          title: "发布成功",
          message: h(
            "i",
            { style: "color: teal" },
            "渠道包批量发布成功"
          ),
        });
      }
    },
  },
  //初始化渠道
  created() {
    this.initChannel();
  },
};
</script>

<style>
</style>